<template>
	<grid-layout
		ref="gridlayout"
		:layout.sync="formData.machineLayoutList"
		:col-num="formData.colNum"
		:row-height="formData.rowHeight"
		:is-draggable="false"
		:margin="[0, 0]"
		:auto-size="false"
		:is-resizable="false"
		:responsive="false"
		:vertical-compact="false"
		:prevent-collision="true"
		:use-css-transforms="true"
	>
		<grid-item
			v-for="(item) in formData.machineLayoutList"
			:key="item.id"
			:x="item.x"
			:y="item.y"
			:w="item.w"
			:h="item.h"
			:i="item.i"
			:style="setGridStyle(item)"
			class="grid-item anim-machine"
			@click.native="onSelectMachineItem(item)"
		>
			<div :ref="`bt`+item.id" style="height: 100%;width: 100%;cursor: pointer;" class="flex-center">
				<!--<span class="el-icon-">{{ item.state === 4 ? '⚠️' : '' }}</span>-->
				<div v-if="item.type === 1" style="word-break: break-word">
					<div class="margin-right-10" style="white-space: nowrap;" :style="{color: item.temState ? '#ed4014' : '#19be6b'}">
						<span
							:class="[
								'el-icon-s-opportunity',
								item.temState ? 'ani' : ''
							]"
						></span>
						<span>{{ item.temperature || '0' }}℃</span>
					</div>
					<div class="" style="white-space: nowrap;" :style="{color: item.humState ? '#ed4014' : '#19be6b'}">
						<span
							:class="[
								'el-icon-heavy-rain',
								item.humState ? 'ani' : ''
							]"
						></span>
						<span>{{ item.humidity || '0' }}%</span>
					</div>
				</div>
				<span v-else>{{ item.name || '无' }}</span>
			</div>
		</grid-item>
	</grid-layout>
</template>
<script>
    import VueGridLayout from 'vue-grid-layout';
    import gridItemStyleMx from '../../../workshopLayout/grid-item-mx';
    import { machineStateList } from '../../../../../utils/jk/status-option-list';
    export default {
        mixins: [gridItemStyleMx],
        props: {
            formData: {
                type: Object,
                default() {
                    return {};
                }
            }
        },
        data() {
            return {
                machineStateList: machineStateList
            };
        },
        components: {
            GridLayout: VueGridLayout.GridLayout,
            GridItem: VueGridLayout.GridItem
        },
        methods: {
            setGridStyle(item) {
                const styleConf = this.getGridItemStyle(item.styleConfig);
                if (Number(item.type || 0) === 1) {
                    // styleConf.border = 'dashed 1px #808695';
                } else {
                    const legendItem = this.machineStateList.find(x => x.id === item.state) || null;
                    styleConf.background = legendItem ? legendItem.color : '#808695';
                }
                return styleConf;
            },
            onSelectMachineItem(e) {
                this.$emit('click', e);
            }
        }
    };
</script>
<style scoped lang="scss">
    .ani {
        padding: 2px;
        box-sizing: border-box;
        box-shadow: 0 0 2px 1px red;
        border-radius: 50%;
        animation: temHumAni 1.2s infinite linear ;
    }
    @keyframes temHumAni {
        0% {
            opacity: 1;
            box-shadow: 0 0 6px 4px red;
        }
        50% {
            opacity: .3;
            box-shadow: 0 0 2px 1px red;
        }
        100% {
            opacity: 1;
            box-shadow: 0 0 6px 4px red;
        }
    }
</style>
